<template>
  <el-card style="width: auto;margin:10px" shadow="always" >
    <div>欢迎您，{{ data.user.name }} 祝您今天过得开心！</div>
  </el-card>
  <el-card style="width: auto;margin:10px" shadow="always">
    <div ref="chartContainer" style="width: 1200px;height:400px;"></div>
  </el-card>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from "echarts";
import request from "@/utils/request";

const chartContainer = ref(null);
const chartInstance = ref(null);

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})

const chartData = reactive({
  data: [],
  xAxisData: [],
  seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
});

const map = reactive({
  key: 0,
})

onMounted(() => {
  load();
})

const load = () => {
  request.get("/RegistrationForm/selectAll").then((res) => {
    // 一层清洗筛
    const tempData = ref([]);
    tempData.value = res.data;
    for (var i = 0; i < tempData.value.length; i++) {
      // 二次匹配清洗筛
      if (chartData.data.indexOf(tempData.value[i].registrationDate) === -1) {
        chartData.data.push(tempData.value[i].registrationDate);
      }
    }
    // 转换为数组，只保留值（日期字符串）
    const datesArray = Object.values(chartData.data);
    // 根据日期值对数组进行排序
    datesArray.sort((a, b) => new Date(a) - new Date(b));
    // 只对近期的数据进行解析，最终数据
    for (var i = 0; i < 4; i++) {
      chartData.xAxisData.push(datesArray[i]);
    }
    for (var i = 0; i < tempData.value.length; i++) {
      if (chartData.xAxisData.indexOf(tempData.value[i].registrationDate) != -1) {
        chartData.seriesData[chartData.xAxisData.indexOf(tempData.value[i].registrationDate)]++;
      }
    }
    console.log(chartData.seriesData);
    init()
  })
}

/**
 * 数据清洗，狗都不洗
 */

function init() {
  chartInstance.value = echarts.init(chartContainer.value);
  // 初始配置项
  const option = {
    title: {
      text: '近期挂号数'
    },
    xAxis: {
      type: 'category',
      data: chartData.xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '挂号数',
      type: 'line',
      data: chartData.seriesData
    }]
  };

// 应用初始配置项
  chartInstance.value.setOption(option);
}

</script>
